<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!--[if lt IE 9]>
    <script th:src="@{/newcommon/js/html5shiv.js}"></script>
    <![endif]-->
    <meta charset="UTF-8">
    <link  rel="Shortcut  Icon"  th:href="@{/statics/home/images/minilogo.png}">
    <link rel="stylesheet" th:href="@{/statics/newcommon/css/m2-commonNew.css}">
    <link rel="Shortcut  Icon" th:href="@{/statics/newcommon/images/minilogo.png}">
    <link rel="stylesheet" th:href="@{/statics/usercenter/css/userCenter.css}">
    <script type="text/javascript" th:src="@{/statics/newcommon/js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/statics/newcommon/js/common.js}"></script>
    <script type="text/javascript" th:src="@{/statics/usercenter/js/esl.js}"></script>
    <link rel="stylesheet" th:href="@{/statics/usercenter/css/jquery.datetimepicker.css}" />
    <script type="text/javascript" th:src="@{/statics/usercenter/js/jquery.datetimepicker.js}"></script>
</head>





<style>
    .vIVR{display:none}
</style>
<script>
    var page=$(".m2-commonNavul-fir").attr("data_page");
    $("#"+page).parent().css("borderBottom","2px solid #ff6666");
    var queuename = '30017180006';
    function callback() {
        $('#tel').val($('#phonenumber').val());
        call();
    }
    setCallResponse = function (json) {
        var obj = eval('(' + json + ')');
        if (obj['description']) {
            $('#callBack-codeErr').css('display', 'block');
            $('#ivrSecurityCode').val('');
            getCode();
            setTimeout(function () {
                $('#callBack-codeErr').css('display', 'none');
            }, 3000);
        }
    }
</script>
<!-- headerEnd -->

<div class="m2-userCentermain">
    <div class="m2-userCentermain-aside">
        <ul>
            <li class="m2-asideListitem">
                <a class="m2-aside-item" th:href="@{/usercenter.html}"><i class="m2-asideIcon1"></i>我的账户</a>
            </li>
            <li class="m2-asideListitem">
                <a class="m2-aside-item m2-aside-toggle" ><i class="m2-asideIcon2"></i>投资管理<b class="m2-asideIcon-new"></b></a>
                <ul class="m2-aside-secItem" style="display:none">
                    <li>
                        <a class="m2-aside-secLink-item" th:href="@{/monthrepay.html}">回款计划</a>
                    </li>
                    <li>
                        <a class="m2-aside-secLink-item" th:href="@{/looselabel_record/queryalls}">散标回款计划</a>
                    </li>
                    <li>
                        <a class="m2-aside-secLink-item" th:href="@{/usercenter-investcontrol-investrecord.html}">投资记录计划</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <script>
        // 		$(document).ready(function(){
        var href = window.location.href;
        var search = window.location.search;
        $('.m2-asideListitem ul a').each(function () {
            if ($(this).prop('href') + search == href) {
                if ($(this).prop('href') == "/usercenter-wangbaoqiang" || $(this).prop('href') == "/usercenter-sirendingqi") {
                } else {
                    $(this).parent().parent('ul').show();
                    $(this).parent().parent('ul').prev('a').removeClass('m2-aside-item');
                    $(this).parent().parent('ul').prev('a').addClass('m2-aside-cur');
                    $(this).css('text-decoration', 'underline');
                    $(this).css('color', '#0996CC');
                }
            }
        });
        $('.m2-asideListitem a:not(.m2-asideListitem ul a)').each(function () {
            if ($(this).prop('href') + search == href) {
                if ($(this).prop('href').search("usercenter-wangbaoqiang") > -1) {
                    $(this).removeClass('m2-aside-wbq');
                    $(this).addClass('m2-aside-cur');
                } else if ($(this).prop('href').search("usercenter-sirendingqi") > -1) {
                    $(this).removeClass('m2-aside-wbq');
                    $(this).addClass('m2-aside-cur');
                } else {
                    $(this).removeClass('m2-aside-item');
                    $(this).addClass('m2-aside-cur');
                }
            }
        });
        $('.m2-asideListitem a:not(.m2-asideListitem ul a)').click(function () {
            if ($(this).prop('href') == '') {
                $(this).siblings('ul').slideToggle();
                $(this).parent().siblings('.m2-asideListitem').children('.m2-aside-secItem').slideUp();
            }
        });
        // 		});
    </script>

    <style>
        .n-hid {
            display:block;
            position:relative;
            cursor: pointer;
            height: 20px;
            width: 20px;
            margin:10px auto;
            background:url("https://www.iqianbang.com/statics/usercenter/images/mark.png") no-repeat 0px 0px;
        }
        .n-hid .n-hov {
            background-color: #f5f5f5;
            border: 2px solid #d4a439;
            border-radius: 8px;
            color: #717171;
            display: none;
            font-size: 12px;
            line-height: 24px;
            padding: 12px 5px;
            position: absolute;
            right: -200px;
            top: -45px;
            width: 170px;
            z-index: 100;
        }
        .n-hid .n-hov i {
            background: rgba(0, 0, 0, 0) url("https://www.iqianbang.com/statics/usercenter/images/n-arr.png") no-repeat scroll 0 0;
            display: block;
            height: 15px;
            left: -10px;
            position: absolute;
            top: 47px;
            width: 11px;
        }
        .n-hid:hover .n-hov {
            display: block;
        }

        .m2-userInevst-linkHide{
            position: absolute;
            top: 37px;
            right: -10px;
            width: 426px;
            padding-left: 14px;
            border: 1px solid #bebebe;
            background-color: #fff;
            z-index: 10;
        }
        .m2-userInevst-linkHide h3{
            width:442px;
            height: 34px;
            line-height: 34px;
            color: #4e4e4e;
            font-size:15px;
            text-align: left;
            border-bottom:none;
        }
        .m2-userInevst-linkHide ul{
            zoom: 1;
        }
        .m2-userInevst-linkHide ul:after{display:block;clear:both;visibility:hidden;height:0;content:'-';}
        .m2-userInevst-linkHide ul li{
            float: left;
            width: 190px;
            font-size: 14px;
            height: 28px;
            line-height: 28px;
            text-align: left;
        }
        .m2-userInevst-linkHide ul li span{
            display: inline-block;
            height: 28px;
            line-height: 28px;
            color: #0996cc;
        }
        .m2-userInevst-linkHide-table{
            width: 424px;
        }
        .m2-user-newsmanage table tr td table td{
            text-align: left;
            border:none;
            padding: 5px 0;
            line-height: 24px;
        }
        .m2-userInevst-linkHide-tableHead{
            width:
        }

        .m2-userInevst-linkHide-arr{
            position: absolute;
            top: -15px;
            right: 30px;
            width: 0;
            height: 0;
            border-width: 8px;
            border-style: solid;
            border-color: transparent transparent #fff transparent;
        }
        .m2-userInevst-linkHide-arrBg{
            position: absolute;
            top: -16px;
            right: 30px;
            width: 0;
            height: 0;
            border-width: 8px;
            border-style: solid;
            border-color: transparent transparent #bebebe transparent;
        }
        .m2-userInevst-linkHidetable-unpay{color:#e64648 ;}
        .m2-userInevst-linkHidetable-payed{color:#717171 ;}


        /*----项目名称隐藏部分----*/

        .m2-userInvest-hide{
            display: none;
            z-index: 5;
            position: absolute;
            left: 0px;
            top: 39px;
            width: 328px;
            border:1px solid #e1e1e1;
            font-size: 14px;
            text-align: left;
            background: #fff;
        }
        .m2-userInvest-hide ul{
            padding: 18px 0 0 0;
            padding: 5px 10;
            min-height: 90px;
        }
        .m2-userInvest-hide ul li{
            min-height: 25px;
            width: 275px;
            line-height: 25px;
            padding-left: 15px;
        }
        .m2-userInvest-hideRig{
            position: absolute;
            right: 0;
            top: 0;
            vertical-align: center;
            height: 100%;

        }
        .m2-userInvest-hideRig a{
            display: block;
            width: 34px;
            height: 105px;
            font-size: 14px;
            line-height: 17px;
            text-align: center;
            background-color: #0996cc;
            color: #fff;
            padding-top: 3px;
            vertical-align: center;
            height: 100%;
        }
        .m2-userInvest-hideRig a:link{background-color: #0996cc;}
        .m2-userInvest-hideRig a:visited{background-color: #0996cc;}
        .m2-userInvest-hideRig a:hover{background-color: #0486BC;}
        .m2-userInvest-hideRig a:active{background-color: #0486BC;}

        .m2-userInvest-hide em{
            position: absolute;
            display: block;
            width: 0;
            height: 0;
            border-width: 8px;
            border-style: solid;
        }
        .m2-userInvesthide-arr{
            top:-17px;
            left: 58px;
            border-color: transparent transparent #e1e1e1 transparent;
        }
        .m2-userInvesthide-arrBg{
            top:-16px;
            left: 58px;
            border-color: transparent transparent #fff transparent;
        }
        .b-indHide-tit:hover .m2-userInvest-hide{
            display: block;
        }
    </style>
    <div class="m2-userCentermanage-con">
        <div class="m2-user-recharge">
            <h3><i class="m2-user-record"></i>还款计划</h3>
        </div>
        <div class="m2-manage-search-selector">
            <ul class="m2-manageSearchsel-time">
                <li class="m2-manageSearchsel-link"><span class="m2-manSealink-unsel" href="#" id="a5">本期待还</span></li>
                <li class="m2-manageSearchsel-link"><span class="m2-manSealink-sel" href="#" id="a6">已还期数</span></li>
            </ul>
        </div>
        <div class="m2-recharge-mainbody">

            <div class="m2-user-newsmanage">
                <table cellpadding="0" cellspacing="0" border="0" id='table2014'>
                    <tr>
                        <th>还款项目</th>
                        <th>应还日期</th>
                        <th>待还款(元)</th>
                        <th>当期期数</th>
                        <th>操作</th>
                    </tr>
                    <tr th:if="${listtrue!=null}" th:each="f:${listtrue}">
                        <td>[[${f.projectnumber}]]</td>
                        <td>[[${#dates.format(f.receivableDate, 'yyyy-MM-dd')}]]</td>
                        <td>[[${f.receivableMoney}]]</td>
                        <td>[[${f.currentTerm}]]</td>
                        <td><button id="btn1" style="width: 80px;color: orangered;height: 40px" th:onclick="|go(${f.id})|">还款</button></td>
                    </tr>
                </table>
            </div>
            <div class="m2-user-newsmanage">
                <table cellpadding="0" cellspacing="0" border="0" id='table2015'>
                    <tr>
                        <th>还款项目</th>
                        <th>计划还款日期</th>
                        <th>还款总额(元)</th>
                        <th>当前还款期数</th>
                        <th>还款日期</th>
                    </tr>
                    <tr th:if="${listfolse!=null}" th:each="t:${listfolse}">
                        <th>[[${t.projectnumber}]]</th>
                        <th>[[${#dates.format(t.receivableDate, 'yyyy-MM-dd')}]]</th>
                        <th>[[${t.receivableMoney}.toFixed(2)]]</th>
                        <th>[[${t.currentTerm}]]</th>
                        <th>[[${#dates.format(t.recordDate, 'yyyy-MM-dd')}]]</th>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
<script >

    $(function(){

        var listYear = $(".m2-manage-search-selector ul li");
        var listCon = $(".m2-user-newsmanage");
        var currentmoney=""
        $(listYear[0]).click(function(){
            $(listCon[0]).fadeIn();
            $(listCon[1]).hide();
            $(listYear[0]).find('span').removeClass('m2-manSealink-unsel');
            $(listYear[0]).find('span').addClass('m2-manSealink-sel');
            $(listYear[1]).find('span').removeClass('m2-manSealink-sel');
            $(listYear[1]).find('span').addClass('m2-manSealink-unsel');
        });
        $(listYear[1]).click(function(){
            $(listCon[1]).fadeIn();
            $(listCon[0]).hide();
            $(listYear[1]).find('span').removeClass('m2-manSealink-unsel');
            $(listYear[1]).find('span').addClass('m2-manSealink-sel');
            $(listYear[0]).find('span').removeClass('m2-manSealink-sel');
            $(listYear[0]).find('span').addClass('m2-manSealink-unsel');
        });
        $(listCon[0]).hide();

        $("a.m2-news-detail").toggle(function(){
            $(this).html("收起");
            getDetailData(this);
        },function(){
            $(this).parent('td').parent('tr').next('tr.sublist').hide();
            $(this).html("详情");
        });

       /* calculateSumNew(2020);*/
        /*calculateSumNew(2021);*/
    });
function go(id) {
   $.ajax({
       url:"[[@{/looselabel_record/payment}]]",
       data:{"ids":id},
       type:"get",
       dataType:"json",
       success:function(data){
           if (data.code==200){
               alert(data.msg);
               window.location="[[@{/looselabel_record/queryalls}]]";
           }else{
               alert(data.msg);
           }
       }
   })
}


</script>
</body>
</html>